<template>
    <div class="login-form">
        <div class="g-form">
            <div class="g-form-line">
                <span class="g-form-label">用户名：</span>
                <div class="g-form-input">
                    <input type="text" v-model="usernameModel" placeholder="请输入用户名">
                </div>
                <span class="g-gorm-error">{{ userErrors.errorText }}</span>
            </div>
            <div class="g-gorm-line">
                <span class="g-form-label">密码：</span>
                <div class="g-form-input">
                    <input type="text" v-model="passwordModel" placeholder="请输入密码">
                </div>
                <span class="g-gorm-error">{{ passwordErrors.errorText }}</span>
            </div>
            <div class="g-gorm-line">
                <div class="g-form-btn">
                    <a class="button" @click="onLogin">登录</a>
                </div>
                <p class="g-gorm-error">{{ errorText }}</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                usernameModel: '',
                passwordModel: '',
                errorText: ''
            }
        },
        computed: {
            userErrors: function () {
                let errorText, status
                if(!/@/g.test(this.usernameModel)) {
                    status = false
                    errorText = "不包含@"
                } else {
                    status = true
                    errorText = ''
                }
                return {
                    status,
                    errorText
                }
            },
            passwordErrors:function () {
                let errorText, status
                if(!/^\w{1,6}$/g.test(this.passwordModel)) {
                    status = false
                    errorText = "密码不是1-6位"
                } else {
                    status = true
                    errorText = ""
                }
                return {
                    status,
                    errorText
                }
            }
        },
        methods: {
            onLogin () {
                if(!this.userErrors.status || !this.passwordErrors.status) {
                    this.errorText = '部分选项未通过'
                } else {
                    this.errorText = ''
                    this.$http.get('api/login').then((res) => {
                        this.$emit('has-log', res.data.data)
                    }, (error) => {
                        console.log(error);
                    })
                }
            }
        }
    }
</script>

<style>
.g-gorm-error {
    color: #e03628;
}
.g-form-btn .button {
    display: inline-block;
    color: red;
    padding: 0 8px;
    border-radius: 3px;
    border: 1px solid gray;
    background: #fff;
}
</style>
